<template>
  <div class="UploadThesis">
    <a-upload
      name="multipartFile"
      v-model:file-list="fileList"
      @change="handleChange"
      @remove="fileRemove"
      :action="action"
      :withCredentials="true"
    >
      <a-button>
        <upload-outlined></upload-outlined>
        Upload
      </a-button>
      <template #itemRender="{ file, actions }">
        <a-space
          style="
            color: #1890ff;
            font-size: 15px;
            margin: 5px;
            width: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div>
            <span :style="file.status === 'error' ? 'color: red' : ''">{{ file.name }}</span>
          </div>
          <div>
            <a href="javascript:;" @click="actions.download" style="margin-right: 10px">下载</a>
            <a href="javascript:;" @click="actions.remove" style="margin-right: 10px">删除</a>
            <a href="javascript:;" @click="showDrawer(file)" style="margin-right: 10px">详情</a>
            <a
              href="javascript:;"
              @click="changeStatus(file)"
              style="margin-right: 10px; pointer-events: none"
              v-if="file.auditStatus === 0"
              >未审核</a
            >
            <a
              href="javascript:;"
              @click="changeStatus(file)"
              style="margin-right: 10px; pointer-events: none"
              v-else
              >已审核</a
            >
          </div>
        </a-space>
      </template>
    </a-upload>
  </div>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    :title="contentFileName"
    placement="right"
    @after-visible-change="afterVisibleChange"
  >
    <p v-if="!imgUrl">{{ contentTxt }}</p>
    <img :src="imgUrl" v-else />
  </a-drawer>
</template>

<script>
import { UploadOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref, onMounted } from 'vue'
import {
  personalFile,
  removeFile,
  changeFileStatus,
  viewDetails,
  viewImgDetails
} from '@/api/fileManage.js'
export default defineComponent({
  components: {
    UploadOutlined
  },
  setup() {
    const fileList = ref([])

    const handleChange = ({ file, fileList }) => {
      if (file.status !== 'uploading') {
        personalFile(103).then((res) => {
          if (res.length > 0) {
            fileList.value = []
            for (let i = 0; i < res.length; i++) {
              const id = res[i].id
              const data = {
                uid: res[i].id,
                name: res[i].filename,
                status: 'done',
                url: `http://127.0.0.1:8082/api/mediafile/download/${id}`,
                auditStatus: res[i].auditStatus
              }
              // 127.0.0.1：8082/api/mediafile/download/99acce45b5554bd1e19ce8533c302bd0
              file.url = `http://127.0.0.1:8082/api/mediafile/download/${id}`
              fileList.value.push(data)
            }
          }
        })
      }
    }

    const fileRemove = (file) => {
      removeFile(file.uid).then((res) => {
        // console.log(res)
      })
    }

    const changeStatus = (file) => {
      changeFileStatus(file.uid, 1).then((res) => {
        file.auditStatus = 1
      })
    }

    const contentTxt = ref('')
    const contentFileName = ref('')
    const viewImg = ref(false)
    const visible = ref(false)
    const afterVisibleChange = (bool) => {
      // console.log('visible', bool)
    }
    // http://127.0.0.1:8082/api/mediafile/upload/103
    const roleInfo = JSON.parse(sessionStorage.getItem('roleInfo'))
    const action = ref(`http://127.0.0.1:8082/api/mediafile/upload/${roleInfo.id}`)

    const imgUrl = ref('')
    const showDrawer = (file) => {
      visible.value = true
      const fileType = file.name.split('.')[1]
      if (fileType === 'jpg' || fileType === 'png') {
        viewImgDetails(file.uid).then((res) => {
          imgUrl.value =
            'data:image/png;base64,' +
            btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          contentFileName.value = file.name.split('.')[0]
        })
      } else {
        viewDetails(file.uid).then((res) => {
          imgUrl.value = ''
          contentTxt.value = res
          contentFileName.value = file.name.split('.')[0]
        })
      }
    }

    onMounted(() => {
      personalFile(roleInfo.id).then((res) => {
        if (res.length > 0) {
          fileList.value = []
          for (let i = 0; i < res.length; i++) {
            const id = res[i].id
            const data = {
              uid: res[i].id,
              name: res[i].filename,
              status: 'done',
              url: `http://127.0.0.1:8082/api/mediafile/download/${id}`,
              auditStatus: res[i].auditStatus
            }
            fileList.value.push(data)
          }
        }
      })
    })

    return {
      fileList,
      visible,
      contentTxt,
      contentFileName,
      viewImg,
      imgUrl,
      action,
      afterVisibleChange,
      showDrawer,
      handleChange,
      fileRemove,
      changeStatus
    }
  }
})
</script>

<style scoped lang="less">
.UploadThesis {
  color: black;
  height: 400px;
  width: 400px;
}
</style>
